<template>
<!-- 左边导航栏区域 -->
  <div class="menu-left">
    <div class="header" :style="{background: theme.menuLeftheadBc}">
      <img :style="{'margin-left': marginle}" class="imgbox" src="../../assets/image/peg.png" alt="">
      <p :style="{color: theme.textColor, width: collapse ? '0' : '195px'}" class="new">
        {{systemName}}
      </p>
    </div>

    <el-menu class="el-menu" :class="'el-menu-'+ theme.theme"
    :collapse="collapse"
    :default-active="routerPath"
    :unique-opened="usersetting.uniqueOpened"
    :default-openeds="defaultOpenedsArray"
    :text-color="theme.textColor"
    :background-color="theme.menuLeftBc"
    :active-text-color="theme.activeColor"
    >
      <SubMenu :list="menuList"></SubMenu>
    </el-menu>
  </div>
</template>

<script>
import themesetting from '../../plugins/setting'
import { mapState } from 'vuex'

export default {
  name: 'MenuLeft',
  data() {
    return {
      systemName: '数字鸽业精准管控云服务平台',   // 系统名称
      theme: {},   // 当前导航栏主题
      collapse: false,   // 是否水平折叠收起菜单
      defaultOpenedsArray: [],  // 当前打开的sub-menu的数组
      marginle: '0px'
    }
  },
  computed: {
    ...mapState({
      usersetting: state => state.usersetting.setting,
      menuList: state => state.menu.menuList,
      worktab: state => state.worktab.worktab
    }),
    routerPath() {
      let { current } = this.worktab
      let { path } = current
      // 个人中心
      if(path === '/User/PersonalCenter') {
        this.defaultOpenedsArray = []
      }
      return this.$route.path
    }
  },
  watch: {
    'usersetting.theme': {
      handler(theme) {
        this.getTheme(theme)
      }
    },
    'menu.menuList' (list){
      this.menuList = list
    },
    'usersetting.uniqueOpened' (uniqueOpened) {
      this.uniqueOpened = uniqueOpened
    },
    // 为突出标题 这里监听主题的变化来达到不同导航主题不同颜色效果
    'theme.menuLeftheadBc': {
      handler() {
        // 加定时器解决覆盖问题
        if(this.theme.menuLeftheadBc == '#3296fa' || '#191A23') {
          setTimeout(() => {
            const p =document.getElementsByClassName("header")[0].children[1]
            p.style.color = '#fff'
          },1)
        }
      }
    },
    'collapse': {
      handler() {
        if(this.collapse == true) {
          this.marginle = '15px'
        }else {
          this.marginle = '0px'
        }
      }
    }
  },
  created() {
    this.getTheme()
  },
  methods: {
    // 初始化用户设置 ||  获取最新设置
    getTheme(theme) {
      let that = JSON.parse(localStorage.getItem('usersetting'))
      this.theme = that.theme
      let a = themesetting.themeList.filter((item) => {
        return item.theme === that.theme
      })
      this.theme = a[0]
    },
    // 关闭导航栏
    closeMenu() {
      this.collapse = true
      this.collapseMobile = true
      this.showMobileModel = false
    },
    // 导航栏伸缩
    visibleMenu() {
      this.collapse = !this.collapse
    }
  }
}
</script>

<style lang="scss" scoped>
.new {
    font-weight:900;
    padding-left: center;
}
.menu-left {
  // 黑色主题
  .el-menu-dark {
    // 选中颜色
    .el-menu-item.is-active {
      background: #2d8cf0 !important;
    }
    // 鼠标移入背景色
    .el-submenu__title:hover {
      background: #121319 !important;
    }
  }
  // 白色主题
  .el-menu-white  {
    
    // box-shadow: 5px 5px 8px 0 red;
    // 选中颜色
    .el-menu-item.is-active {
      background: #F0FAFF !important;
      // 左侧线条
      &::before {
        content: '';
        width: 3px;
        height: 100%;
        position: absolute;
        left: 0;
        background: #3296FA;
      }
    }
    // 鼠标移入背景色
    .el-submenu__title:hover,
    .el-submenu .el-menu-item:hover {
      color: #3296FA !important;
      background: #F0FAFF !important;
    }
    // 鼠标移入图标颜色
    .el-submenu__title:hover i,
    .el-submenu .el-menu-item:hover i {
      color: #3296FA !important;
    }
  }
  // 折叠后宽度
  .el-menu--collapse {
    $menu-left-shrink-width: 70px;
    width: $menu-left-shrink-width;
  }
  // 左边距
  .el-submenu__title {
    padding-left: 25px !important;
  }
  // 设置文字与图标的距离
  .el-submenu__title span {
    margin-left: 10px;
  }
  .el-submenu .el-menu-item span{
    margin-left: 15px;
  }
  // 箭头加粗
  .el-submenu__icon-arrow {
    font-weight: bold;
  }
}
</style>

<style lang="scss" scoped>
.menu-left {
    height: 100vh;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    position: fixed;
    z-index: 1001;
    top: 0;
    left: 0;
    box-shadow: 5px 5px 8px 0 rgba(29,35,41,.05);

    .el-menu--collapse {
      >>> .el-submenu__title span,
      >>> .el-submenu__icon-arrow {
        display: none;
      }
    }

    .header {
      height: 60px;
      width: 100%;
      line-height: 60px;
      width: 100%;
      box-sizing: border-box;
      cursor: pointer;
      display: flex;
      overflow: hidden;
      text-align: center;
      .imgbox {
        width:35px;
        height:40px;
        margin:auto 0;
      }
      p {
        color: #C3C3C3;
        font-size: 15px;
        overflow: hidden;
        transition: width .3s ease-in-out;
        // margin: 0 auto;
      }
    }

    .el-menu {
      border-right: 0;
      height: calc(100vh - 45px);
      box-sizing: border-box;
      overflow-y: auto;

      &::-webkit-scrollbar {
        width: 0px !important;
      }
    }

    .el-menu:not(.el-menu--collapse) {
      $menu-left-open-width: 250px;
      width: $menu-left-open-width;
    }

    .menu-model {
      display: none;
    }
  }
</style>